<template>
    <view class="container">
        <!-- 长图片区域 -->
        <scroll-view class="image-container" scroll-y>
            <image 
                src="../../pic/introduction.jpeg" 
                mode="widthFix" 
                class="long-image"
            ></image>
        </scroll-view>

        <!-- 开始使用按钮 -->
        <view class="start-button" @click="goToHome">
            <text class="button-text">开始使用</text>
        </view>
    </view>
</template>

<script>
export default {
    methods: {
        goToHome() {
            uni.navigateTo({
                url: '/pages/homepage/homepage'
            });
        }
    }
}
</script>

<style>
.container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: #ffffff;
}

.image-container {
    flex: 1;
    width: 100%;
}

.long-image {
    width: 100%;
    height: auto;
}

.start-button {
    width: 80%;
    height: 200rpx;
    margin: 40rpx auto;
    border-radius: 50rpx;
    background: linear-gradient(135deg, #6e8efb, #4a6feb);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8rpx 16rpx rgba(110, 142, 251, 0.3);
    transition: transform 0.2s ease;
}

.start-button:active {
    transform: scale(0.98);
}

.button-text {
    color: #ffffff;
    font-size: 36rpx;
    font-weight: bold;
    letter-spacing: 2rpx;
}
</style>